<template>
  <div>
    <el-button
      v-permissions="{ permission: ['add:ChargeFee'] }"
      type="primary"
      @click="$emit('send')"
    >
      结算商品
    </el-button>
    <div>
      <!-- 搜索输入，选择框 -->
      <div class="grid_4_column" style="margin: 10px 0">
        <div class="flex_y_center">
          <div style="width: 80px; text-align: right">用户名：</div>
          <el-input v-model="keyWord" placeholder="请输入用户名" />
        </div>
      </div>
      <!-- 筛选，重置筛选条件按钮 -->
      <div>
        <el-button
          icon="el-icon-search"
          :loading="filterLoad"
          type="primary"
          @click="getHangInfo('filterLoad')"
        >
          筛选
        </el-button>
        <el-button type="text" @click="getHangInfo">重置筛选条件</el-button>
      </div>
    </div>
    <!-- 挂取单展示列表 -->
    <el-table
      :data="hangUpInfo"
      :empty-text="emptyText"
      style="width: 100%; margin-top: 10px"
    >
      <el-table-column label="用户名" prop="user_name" />
      <el-table-column label="客户名" prop="customer_name" />
      <el-table-column label="会员等级" prop="level_name" />
      <!-- 自定义表头 -->
      <el-table-column align="left" label="操作">
        <template slot-scope="scope">
          <div class="flex_y_center">
            <el-button
              v-permissions="{ permission: ['view:ChargeFee'] }"
              type="primary"
              @click="goodsDetails(scope.row)"
            >
              结算
            </el-button>
            <el-button
              v-permissions="{ permission: ['delete:ChargeFee'] }"
              type="danger"
              @click="cancelHang(scope.row)"
            >
              删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex; justify-content: space-between">
      <div></div>
      <!-- 分页 -->
      <el-pagination
        :current-page.sync="page"
        layout="prev, pager, next, jumper"
        :total="total"
        @current-change="getHangInfo"
      />
    </div>
  </div>
</template>

<script>
  import { getConsumeList, delConsume } from '@/api/toll'

  export default {
    data() {
      return {
        filterLoad: false, // 控制按钮的加载动画
        keyWord: '',

        emptyText: ' ',
        hangUpInfo: [], // 存放获取到的挂单数据
        page: 1,
        total: 10, // 分页页数
      }
    },
    mounted() {
      this.getHangInfo()
    },
    methods: {
      // 获取帐单数据
      getHangInfo(load) {
        this[load] = true
        const loading = this.$loading({
          lock: true,
          target:
            this.hangUpInfo.length == 0
              ? '.el-table__empty-block'
              : '.el-table__body',
        })
        const params = {
          cus_name: this.keyWord,
          page: this.page,
          pagesize: 10,
        }
        getConsumeList(params).then((res) => {
          this.hangUpInfo = res.data.data
          this.total = res.data.last_page * 10
          this[load] = false
          loading.close()
          if (res.data.data.length == 0) {
            this.emptyText = '暂无数据'
          }
        })
      },
      goodsDetails(item) {
        this.$emit('send', {
          id: item.id,
          customer_id: item.customer_id,
        })
      },
      // 删除指定单
      cancelHang(item) {
        this.$confirm('确定要将"' + item.customer_name + '"单删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            const params = {
              id: item.id,
            }
            // 调用取消接口，将指定收费单取消
            delConsume(params).then(() => {
              this.$message.success(item.customer_name + '用户结算单删除成功')
              this.getHangInfo() // 重新获取结算收费列表
            })
          })
          .catch(() => {})
      },
    },
  }
</script>

<style scoped>
  .grid_4_column {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
  }
  .flex_dir_between {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }
  .goods_item {
    background-color: lightblue;
    padding: 10px;
    cursor: pointer;
    transition: 0.5s;
  }
  .goods_item {
    transition: 0.3s;
  }
  .goods_item:hover {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
  }
  /*table*/
  table,
  th,
  td {
    border: 1px solid #f0f0f0;
    border-collapse: collapse;
    text-align: start;
    padding: 14px;
  }
  table {
    width: 100%;
  }
  th {
    background-color: #fafafa;
    font-weight: 500;
  }
  tr:hover {
    background-color: #dad8d87e;
  }
</style>
